<template>
    <div>
      <avue-crud
        :option="option"
        :search.sync="search"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :permission="permissionList"
        ref="crud"
        @search-change="searchChange"
        @search-reset="searchReset"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @sort-change="sortChange"
      >
      <!-- @on-load="onLoad" -->

        <template slot="menuLeft">
          <el-button type="primary" size="small" @click.stop="addWhite" >添加服务商白名单</el-button >
          <el-button type="primary" size="small" @click.stop="delWhite" >批量删除白名单</el-button >
        </template>
        <template slot="menu" slot-scope="{row}">
          <el-button @click.stop="rowDel(row)" icon="el-icon-delete" type="text" size="small">删 除</el-button >
        </template>
        <template slot-scope="{}" slot="serviceNoSearch">
          <select-page ref="searchSerSelect" label="serviceName" value="serviceNo" :select.sync="search.serviceNo" :url="website.searchLink.serviceUrl" placeholder-text="服务商" filter-key="searchParam"></select-page>
        </template>
      </avue-crud>


      <el-dialog
        :title="dialogModel.text"
        top="3%"
        :width="screenWidth>1920?'30%':(screenWidth<=1920 && screenWidth>1500)?'30%':'90%'"
        append-to-body
        :close-on-click-modal="false"
        :visible.sync="dialogModel.visible"
        v-if="dialogModel.visible"
        :before-close="handleClose"
      >
        <div class="z_flex"> 
          <span style="min-width:60px;">服务商:</span>
          <select-page style="width:100% !important;" ref="serviceForm" label="serviceName" value="serviceNo" :select.sync="modelForm.serviceNo" :url="website.searchLink.serviceUrl" placeholder-text="服务商" filter-key="searchParam"></select-page>
          <div class="z_flex" style="padding-left:20px;">
            <el-checkbox v-model="modelForm.isSelectChild" :true-label='1' :false-label='0'>包含下级</el-checkbox>
          </div>
        </div>
        <div slot="footer">
          <el-button size="small" type="primary" @click="modelSubmit">{{dialogModel.subText}}</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import selectPage from "@/components/select-page/select-page";
import { getServiceList } from "@/api/rb-oem/optimizePolicies/deal";

export default {
  components: {
    selectPage
  },
  props: {
    serviceArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    const serviceTypeValidate = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入参数"));
      } else if (isNaN(value)) {
        callback(new Error("请输入数字型参数"));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!isMobile(value)) {
        callback(new Error("手机号码不正确！"));
      } else {
        callback();
      }
    };
    return {
      screenWidth: document.documentElement.clientWidth,
      loading: false,
      query: {},
      search: {},
      dialogVisible: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        height: "calc(50vh - 50px)",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        viewBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: false,
        indexLabel:'序号',
        menuWidth: 100,
        searchMenuSpan: 24,
        searchLabelWidth: 120, //搜索框标题宽度
        // searchIcon:true,
        column: [
          {
            label: "服务商编号",
            searchLabel: "服务商",
            prop: "serviceNo",
            type: 'select',
            addDisplay: false,
            editDisplay: false,
            search: true,
            span: 24,
            overHidden: true,
            width: 110,
            rules: [
              {
                required: true,
                message: "请选择服务商",
                trigger: "blur",
              },
            ],
            searchOrder:1
          },
          {
            label: "服务商名称",
            labelWidth: 100,
            prop: "serviceName",
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入服务商名称",
                trigger: "blur",
              },
            ],
            overHidden: true,
            minWidth: 170
          },
          {
            label: '',
            prop: 'isSelectChild',
            type: 'select',
            multiple: false,
            dataType: "string",
            showColumn: false,
            hide: true,
            search: true,
            searchType:"checkbox",
            // searchSpan:2,
            searchLabelWidth: '0',
            dicData: [{
              label:'包含下级',
              value: 1
            }],
            searchOrder:1
          },
          {
            label: "上级服务商编号",
            prop: "parentServiceNo",
            addDisplay: false,
            editDisplay: false,
            span: 24,
            overHidden: true,
            minWidth: 120
          },
          {
            label: "上级服务商",
            labelWidth: 100,
            prop: "parentServiceName",
            span: 12,
            rules: [
              {
                required: true,
                message: "请输入上级服务商",
                trigger: "blur",
              },
            ],
            overHidden: true,
            minWidth: 170
          },
          {
            label: "服务商类型",
            labelWidth: 100,
            prop: "serviceType",
            type: "select",
            dataType: "number",
            span: 12,
            search: true,
            searchOrder:5,
            showColumn: false,
            slot: true,
            hide: true,
            dicUrl: "/api/blade-system/dict/dictionary?code=service_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [
              {
                required: true,
                validator: serviceTypeValidate,
                trigger: "blur"
              }
            ],
            overHidden: true
          },
          {
            label: "服务商类型",
            prop: "serviceTypeName",
            slot: true,
            display: false,
            overHidden: true,
            minWidth: 82
          },
          {
            label: "联系人",
            prop: "contactName",
            search: true,
            searchOrder:3,
            rules: [
              {
                required: true,
                message: "请输入联系人",
                trigger: "blur",
              },
            ],
            overHidden: true,
            minWidth: 75
          },
          {
            label: "联系电话",
            prop: "contactNumber",
            search: true,
            searchOrder:4,
            rules: [
              {
                required: true,
                validator: validatePhone,
                trigger: "blur",
              },
            ],
            overHidden: true,
            minWidth: 100
          },
          {
            label: "加入白名单时间",
            prop: "createTime",
            slot: true,
            span: 24,
            addDisplay: false,
            editDisplay: false,
            overHidden: true,
            minWidth: 140
          }
        ]
      },
      dialogModel:{
        type:'',
        text:'',
        visible:false,
        subText:''
      },
      checked:false,
      modelForm:{
        serviceNo:'',
        isSelectChild:0
      },
      data: [],
      allData: [],
    };
  },
  watch:{
    serviceArr: {
      handler(arr) {
        this.data = arr;
        if(arr.length>0){
          this.allData = arr;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    modelSubmit(){
      let that = this;
      if(that.dialogModel.type == 'add'){
        if(that.modelForm.serviceNo){
          /**
         *  type 1.添加 2.删除 3.查询
         */
          let param = {
            ...that.modelForm,
            type:1,
            serviceList:that.allData
          }
          
          that.onLoad(param)
        }else{
          that.$message({ type: "error", message: "请选择要添加白名单的服务商！" });
        }
      }else{
        let param = {
          ...that.modelForm,
          type:2,
          serviceList:that.allData
        }
        that.onLoad(param)
      }
    },
    handleClose(done) {
      this.initDialogModel();
      done()
    },
    initDialogModel(){
      this.dialogModel={
        type:'',
        text:'',
        visible:false,
        subText:''
      }
      this.modelForm={
        serviceNo:'',
        isSelectChild:0
      }
    },
    addWhite(){
      this.dialogModel={
        type:'add',
        text:'添加白名单',
        visible:true,
        subText:'确认添加'
      }
    },
    delWhite(){
      this.dialogModel={
        type:'del',
        text:'删除白名单',
        visible:true,
        subText:'确认删除'
      }
    },
    rowDel(row) {
      let that = this;
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let param ={
            isSelectChild:0,
            type:2,
            serviceList:that.allData,
            serviceNo:row.serviceNo
          }
          
          return that.onLoad(param);
        })
        .then(() => {
          that.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    onLoad(params = {}) {
      let that = this;
      this.loading = true;
      /**
       * type: 1.添加 2.删除 3.查询
       */
      let param = {
        ...params
      }

      if(JSON.stringify(params)=='{}'){
        param={
          ...this.search,
          type:3,
          serviceList:that.allData
        }
      }
      
      getServiceList(param).then((res) => {
        const data = res.data.data;
        this.data = data.serviceList;
        this.allData = data.allServiceList;
        // this.page.total = data.total;
        this.loading = false;
        if(params.type===1||params.type===2){
          that.search={}
        }
      });
    },
    sortChange(val) {
      if (val.order == "ascending") {
        //正序
        this.query.ascs = val.prop;
        this.query.descs = "";
      } else {
        //倒序
        this.query.descs = val.prop;
        this.query.ascs = "";
      }
      this.refreshChange();
    },
    searchReset() {
      this.query = {};
      this.onLoad();
    },
    searchChange(params, done) {
      this.query = params;
      // this.page.currentPage = 1;
      this.onLoad();
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad();
    }
  }
};
</script>

<style lang="scss" scoped>
.z_flex{
  display: flex !important;
  align-items: center;
}

/deep/ .el-select--small{
  width: 100% !important;
}
</style>
